<template>
    <el-dialog
            :close-on-click-modal="false"
            :visible.sync="personalDataPreVisible"
            width="40%"
            style="overflow: hidden ;"
            v-dialogDrag
            id="personalDataPreDialog"
            @close="close">
        <div id="dataPreview" style="background-color: yellow">
            <el-main style=" min-height: 300px;overflow: hidden">
                <el-table
                        @row-click="showFeature"
                        :data="infoData"
                        height="250"
                        top="7%"
                        style="overflow:auto;height:400px;">
                    <el-table-column
                            v-if="item !='st_asgeojson'"
                            v-for="item in headers"
                            :property="item"
                            :label="item"
                            :key="item">
                    </el-table-column>
                </el-table>

            </el-main>
            <el-footer style="text-align: center">
                <el-pagination
                        :page-size="pageSize"
                        :total="personalDataCount"
                        :current-page="personalDataCurrentPage"
                        layout="prev, pager, next"
                        @current-change="personalPageChange"
                        style="margin-top: 10px;">
                </el-pagination>
            </el-footer>
        </div>
    </el-dialog>
</template>
<script>
    export default {
        name: "externalDataPreDialog",
        data() {
            return {
                personalDataPreVisible: false,
                url: '',
                infoData: [],
                headers: [],
                personalDataCount: 1,
                personalDataCurrentPage: 1,
                pageSize: 5,
                newLoading: '',
                // tag:0,
            }
        },
        watch:{
            // personalDataPreVisible(){
            //     if(this.personalDataPreVisible==true){
            //         this.getModelInfo();
            //     }
            // }
        },
        computed: {
            // personalDataPreVisible() {
            //     let that = this;
            //     if (this.personalDataPreVisible == true) {
            //         that.getModelInfo();
            //     }
            // }
        },
        methods: {
            close() {
                this.newLoading.close();
                this.personalDataPreVisible = false;
                this.personalDataCurrentPage = 1;
                this.personalDataCount = 1;
            },
            showFeature(row) {
                //row.st_asgeojson存着坐标信息
            },
            getModelInfo() {
                // this.$forceUpdate();
                let that = this;
                // this.loading = true;
                // this.personalDataPreVisible=true;
                let srrr = document.getElementById('dataPreview');
                // alert(srrr);
                // if (srrr != null) {
                    this.newLoading = this.$loading({
                        // lock: true,
                        text: '获取数据中...',
                        target: "#dataPreview",
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.infoData = [];
                    let url = that.url + "&pageNo=" + this.personalDataCurrentPage + "&pageSize=" + this.pageSize;
                    this.$axios.post(url).then(res => {
                        that.newLoading.close();
                        if (res.code == 200) {
                            if (res.body.totalSize == -1) {
                                that.$message({
                                    type: 'warning',
                                    message:
                                        '数据集为空！'
                                })
                            } else {
                                that.headers = [];
                                that.infoData = [];
                                that.personalDataCount = res.body.totalSize;
                                let tabledata = [];
                                for (let i = 0; i < res.body.records.length; i++) {
                                    let data = res.body.records[i];
                                    tabledata.push(data);
                                }
                                that.infoData = tabledata;
                                for (let key in that.infoData[0]) {
                                    that.headers.push(key);
                                }
                            }
                        } else {
                            that.$message({
                                type: 'error',
                                message:
                                    '数据预览失败！'
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message({
                            type: 'warning',
                            message:
                                '数据集预览失败！'
                        })
                    })
                // }
            },
            personalPageChange(currentPage) {
                // this.newLoading.close();
                this.personalDataCurrentPage = currentPage;
                this.getModelInfo();
            },
        },
        created() {
            // this.$forceUpdate();
            let that = this;
            this.$Bus.$on('externalDatapreview', res => {
                that.$forceUpdate();
                that.url = res.url;
                that.personalDataPreVisible = res.visible;
                // that.tag=1;
                that.getModelInfo();
            })
        },
        beforeUpdate(){
            // let srrr2 = document.getElementById('dataPreview');
            // alert(srrr2);
            // this.getModelInfo();
            // let that=this;
            // this.$Bus.$on('externalDatapreview', res => {
            //     // that.$forceUpdate();
            //     that.url = res.url;
            //     that.personalDataPreVisible = res.visible;
            //     that.tag=1;
            //     that.getModelInfo();
            // })
        }
    }
</script>

<style>

</style>